<template>
  <div class="app-container">
    <div class="head">
      <span style="float: left">{{ $t("area.Layer") }}:</span>
      <treeselect
        v-model="mapId"
        :class="{ treeps: isDisable }"
        :disabled="isDisable"
        :placeholder="$t('area.chosenLayer')"
        :max-height="300"
        :options="mapList"
        style="float: left; width: 200px"
        @input="nodeClick"
      />
      <span style="margin-left: 20px">{{ $t("operating.operating") }}:</span>
      <span>
        <el-tooltip
          v-for="(item, index) in $t('fence.drawForms')"
          :key="index"
          effect="dark"
          :content="item.label"
          placement="bottom"
        >
          <el-button
            :key="item.value"
            type="text"
            :autofocus="false"
            :data-id="item.value"
            :label="item.label"
            :disabled="disabled"
            size="mini"
            @click="handleChange(index, item.value)"
          >
            <i
              :class="[item.id == colorFlag ? item.unIconFont : item.iconFont]"
            />
          </el-button>
        </el-tooltip>
      </span>
    </div>
    <div id="map" />
    <!-- <div v-show="!mapId">暂无地图，请先选择</div> -->

    <!--新增围栏-->
    <el-drawer
      custom-class="changeDialog"
      :title="$t('fence.fenceSet')"
      :visible.sync="fenceEditVisible"
      direction="rtl"
      :modal-append-to-body="true"
      size="100%"
      :modal="false"
      @open="disabled = true"
      @close="closeDialog"
    >
      <el-form label-width="80px">
        <el-form-item>
          <el-button type="primary" @click="saveFenceEdit">{{
            $t("operating.determine")
          }}</el-button>
          <el-button type="danger" @click="deleteForm">{{ oparts }}</el-button>
        </el-form-item>
        <!--围栏名称-->
        <el-form-item :label="$t('fence.fenceName')">
          <el-input v-model="fenceName" />
        </el-form-item>
        <!--围栏类型-->
        <el-form-item :label="$t('fence.fenceType')">
          <el-select
            v-model="fenceType"
            :multiple="true"
            filterable
            :placeholder="$t('operating.pleaseChosen')"
          >
            <el-option
              v-for="item in $t('fence.fenceTypeList')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item :label="$t('realtime.styleModification')">
            <el-tooltip class="item"
                        effect="dark"
                        :content="$t('realtime.changeFenceStyle')"
                        placement="top">
              <el-color-picker v-model="color1"
                               show-alpha
                               size="mini"
                               @change="changeColor()" />
            </el-tooltip>
            <el-tooltip class="item"
                        effect="dark"
                        :content="$t('realtime.modifyBorderStyle')"
                        placement="top"
                        style="margin-left:10px;">
              <el-color-picker v-model="color2"
                               show-alpha
                               size="mini"
                               @change="changeColor()" />
            </el-tooltip>
          </el-form-item> -->
        <el-form-item :label="$t('realtime.changeFenceStyle')">
          <el-color-picker
            v-model="color1"
            show-alpha
            size="mini"
            @change="changeColor()"
          />
        </el-form-item>
        <el-form-item :label="$t('realtime.modifyBorderStyle')">
          <el-color-picker
            v-model="color2"
            show-alpha
            size="mini"
            @change="changeColor()"
          />
        </el-form-item>
        <span v-if="arr.length > 0">
          <el-form-item
            v-for="(item, i) in allDataCount"
            :key="i"
            :label="i.toString()"
          >
            <el-row>
              <el-col :span="12">
                <el-form label-width="20px" @submit.native.prevent>
                  <el-form-item label="X:">
                    <el-input-number
                      v-model="arr[i]"
                      controls-position="right"
                      style="width: 100%"
                      :step="0.1"
                      @change="changeArr"
                    />
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form label-width="20px" @submit.native.prevent>
                  <el-form-item label="Y:">
                    <el-input-number
                      v-model="srr[i]"
                      controls-position="right"
                      style="width: 100%"
                      :step="0.1"
                      @change="changeArr"
                    />
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-form-item>
        </span>

        <el-form-item v-if="radius != null" label="X:">
          <el-input-number
            v-model="originX"
            controls-position="right"
            :step="0.1"
            @change="changeArr2"
          />
        </el-form-item>
        <el-form-item v-if="radius != null" label="Y:">
          <el-input-number
            v-model="originY"
            controls-position="right"
            :step="0.1"
            @change="changeArr2"
          />
        </el-form-item>
        <el-form-item v-if="radius != null" label="Radius:">
          <el-input-number
            v-model="radius"
            controls-position="right"
            :step="0.1"
            @change="changeArr2"
          />
        </el-form-item>
      </el-form>
    </el-drawer>
    <!--删除围栏提示框-->
    <el-dialog
      :title="$t('operating.prompt')"
      :close-on-click-modal="false"
      :visible.sync="delFenceVisible"
      width=""
    >
      <div class="del-dialog-cnt">{{ $t("operating.deletePrompt") }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteFence">{{
          $t("operating.determine")
        }}</el-button>
        <el-button @click="delFenceVisible = false">{{
          $t("operating.cancel")
        }}</el-button>
      </span>
    </el-dialog>
    <!-- 左下角坐标显示和缩放比例 -->
    <div class="positiondiv">
      <span />
    </div>
    <div class="scalediv">
      <span />
    </div>
    <!-- 显示坐标方向示意图 -->
    <div class="zuobiao" />
  </div>
</template>

<script>
import i18n from '@/utils/lang/index'

import { GeoJSON } from 'ol/format.js'
import { Draw, Modify, Snap, Select, Translate } from 'ol/interaction.js'
import { Circle, LineString, Point, Polygon } from 'ol/geom.js'
import { createRegularPolygon, createBox } from 'ol/interaction/Draw.js'
import { altKeyOnly, click, pointerMove } from 'ol/events/condition'
import { Image } from 'ol/layer.js'
import { ImageStatic } from 'ol/source.js'
import Overlay from 'ol/Overlay'
import { Projection } from 'ol/proj.js'
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { baseUrl } from '@/utils/global'
import Cookie from 'js-cookie'
import axios from 'axios'
// import gratiClue from '../../../static/map/009.png'
import { OSM, Vector as VectorSource } from 'ol/source'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import {
  Style,
  Icon,
  Text,
  Fill,
  Stroke,
  Circle as CircleStyle
} from 'ol/style'
import { getLength } from 'ol/sphere'
import {
  sendThis,
  Load_Map,
  _iMap,
  _TransPixel,
  TagStyle,
  _Style,
  updateOverlayPosition,
  FenceStyle,
  _TransMetric,
  _TransMetric2,
  _TransMetric3,
  _TransMetricFence,
  _dPR,
  Load_Fence,
  FenceSource,
  Load_Fence2,
  FenceSource2
} from '@/utils/historyMap.js'
import { getMapTree, getMap } from '@/api/location'
import {
  fenceOneInfo,
  addFence,
  deleteFence
} from '@/api/system/historyDisplayInfo.js'
export default {
  components: { Treeselect }, // 注册树形穿梭框组件
  data() {
    return {
      arr: [],
      srr: [],
      mapId: null,
      mapList: [],
      colorFlag: 0,
      drawFormValue: 'None', // 绘制形状
      _Select: null,
      fenceId: null,
      draw: null,
      coors: null,
      fenceEditVisible: false,
      fenceName: null,
      fenceType: null,
      mapName: null,
      Geo: null,
      delFenceVisible: false,
      sketchCoords: 6,
      measureTooltipElement2: null,
      measureTooltip2: null,
      value1: false,
      gratLayer: null,
      MeasureSource: null,
      MeasureLayer: null,
      oparts: i18n.t('operating.cancel'),
      count: 0,
      allDataCount: [],
      modify: null,
      disabled: false,
      color1: null,
      color2: null,
      radius: null,
      originX: null,
      originY: null,
      mark: null,
      isDisable: false
    }
  },
  // 钩子
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 加载地图树
      getMapTree().then((res) => {
        const RES = this.responseUse(res)
        if (typeof RES !== 'undefined') {
          this.mapList = RES
          sendThis(this)
          this.mapId = RES[0].id
        }
      })
    },
    nodeClick() {
      const self = this
      if (
        self.mapId === '' ||
        self.mapId === undefined ||
        self.mapId === null
      ) {
        self.radius = null
        if (self._Select != null) {
          _iMap.removeInteraction(self._Select)
        }
        if (self.modify != null) {
          _iMap.removeInteraction(self.modify)
        }
        if (self.draw != null) {
          _iMap.removeInteraction(self.draw)
        }

        return
      }
      getMap(self.mapId).then((res) => {
        const RES = self.responseUse(res)
        if (RES != undefined) {
          $('#map').empty()
          self.mapName = RES.mapName
          Load_Map(
            baseUrl + '/file' + RES.mapPath,
            RES.mapActualX,
            RES.mapActualY,
            RES.mapPixelX,
            RES.mapPixelY,
            RES.mapPixelX / RES.mapActualX,
            [RES.mapOriginX, RES.mapOriginY],
            false
          )
          Load_Fence(self.mapId)
          Load_Fence2()
          self.fenceModify_init()
          self.createMeasureTooltip2()
        }
      })
    },
    handleChange(val, type) {
      this.colorFlag = val
      this.drawFormValue = type
      this.arr = []
      this.srr = []
      this.fenceModify_init()
    },
    // 修改围栏开始
    fenceModify_init() {
      const self = this
      self.radius = null
      if (self._Select != null) {
        _iMap.removeInteraction(self._Select)
      }
      if (self.modify != null) {
        _iMap.removeInteraction(self.modify)
      }
      if (self.draw != null) {
        _iMap.removeInteraction(self.draw)
      }

      if (
        self.mapId === '' ||
        self.mapId === undefined ||
        self.mapId === null
      ) {
        this.msgError(this.$i18n.t('Notice.mapIDIsEmpty'))
        return
      }
      if (self.drawFormValue == 'None') {
        self._Select = null
      } else if (self.drawFormValue == 'Box') {
        self.draw = new Draw({
          source: FenceSource2,
          type: 'Circle',
          geometryFunction: createBox()
        })
      } else if (self.drawFormValue == 'Square') {
        self.draw = new Draw({
          source: FenceSource2,
          type: 'Circle',
          geometryFunction: createRegularPolygon(4)
        })
      } else if (self.drawFormValue == 'Circle') {
        self.draw = new Draw({
          source: FenceSource2,
          type: 'Circle'
        })
      } else if (self.drawFormValue == 'Polygon') {
        self.draw = new Draw({
          source: FenceSource2,
          type: 'Polygon'
        })
      } else if (self.drawFormValue == 'Select') {
        self._Select = new Select({
          condition: click
        })
      } else if (self.drawFormValue == 'BiaoChi') {
        self.draw = new Draw({
          source: FenceSource2,
          type: 'LineString'
        })
      }
      if (self.drawFormValue == 'Select') {
        _iMap.addInteraction(self._Select)
        self.modify = new Modify({
          features: self._Select.getFeatures()
        })
        _iMap.addInteraction(self.modify)
        self._Select.on('select', function(e) {
          self.color1 = null
          self.color2 = null
          if (e.selected.length > 0) {
            if (e.selected[0].get('geometry').getType() == 'Circle') {
              self.mark = 'circle'
              e.selected.forEach(function(f) {
                self.fenceId = f.getId()
              })
              self.arr = []
              fenceOneInfo(self.fenceId).then((res) => {
                const RES = self.responseUse(res)
                if (RES != undefined) {
                  self.fenceEditVisible = true
                  self.isDisable = true
                  self.fenceName = RES.fenceName
                  self.fenceType = RES.fenceType.split(',')
                  self.radius = parseFloat(RES.radius)
                  self.originX = eval(RES.origin)[0]
                  self.originY = eval(RES.origin)[1]
                  if (RES.fillColor != undefined && RES.fillColor != 'null') {
                    self.color1 = RES.fillColor
                  }
                  if (RES.frameColor != undefined && RES.frameColor != 'null') {
                    self.color2 = RES.frameColor
                  }
                }
              })
              return
            }
            self.mark = 'other'
            self.radius = null
            e.selected.forEach(function(f) {
              self.fenceId = f.get('id')
              if (self.fenceId == undefined) {
                self.fenceName = null
                self.fenceType = null
                return
              }
              for (var k = 0; k < self.count; k++) {
                _iMap.removeOverlay(_iMap.getOverlayById(k))
              }
              self.count = f.get('geometry').getCoordinates()[0].length - 1
              self.allDataCount = f.get('geometry').getCoordinates()
              self.allDataCount = _TransMetric3(self.allDataCount, 2)
              for (var j = 0; j < self.allDataCount.length; j++) {
                self.allDataCount[j] = self.allDataCount[j].map(Number)
              }
              self.allDataCount.pop()
              self.arr = []
              self.srr = []
              self.allDataCount.forEach((element, index) => {
                self.arr[index] = element[0]
                self.srr[index] = element[1]
              })
              f.get('geometry')
                .getCoordinates()[0]
                .forEach(function(e, i) {
                  if (self.count == i) {
                    return
                  }
                  var measureTooltipElement = document.createElement('div')
                  measureTooltipElement.className = 'ol-circle'
                  var measureTooltip = new Overlay({
                    id: i,
                    element: measureTooltipElement,
                    offset: [0, -5],
                    positioning: 'bottom-center'
                  })
                  _iMap.addOverlay(measureTooltip)
                  measureTooltipElement.innerHTML = i
                  measureTooltip.setPosition(e)
                })
              fenceOneInfo(self.fenceId).then((res) => {
                const RES = self.responseUse(res)
                if (RES != undefined) {
                  self.fenceEditVisible = true
                  self.isDisable = true
                  self.fenceName = RES.fenceName
                  self.fenceType = RES.fenceType.split(',')
                  self.coors = RES.posGroup
                  if (RES.fillColor != undefined && RES.fillColor != 'null') {
                    self.color1 = RES.fillColor
                  }
                  if (RES.frameColor != undefined && RES.frameColor != 'null') {
                    self.color2 = RES.frameColor
                  }
                }
              })
            })
          }
        })

        self.modify.on('modifyend', function(e) {
          const f = e.features.array_[0]
          if (f.get('geometry').getType() == 'Circle') {
            self.mark = 'circle'
            const f = e.features.array_[0].get('geometry')
            const coors =
              '[' + _TransMetric2(f.getCenter(), 2).toString() + ']'
            self.originX = eval(coors)[0]
            self.originY = eval(coors)[1]
            self.radius = eval((f.getRadius() / _dPR).toFixed(2))

            return
          }
          for (var k = 0; k < self.count; k++) {
            _iMap.removeOverlay(_iMap.getOverlayById(k))
          }
          self.count = f.get('geometry').getCoordinates()[0].length - 1
          self.allDataCount = f.get('geometry').getCoordinates()
          self.allDataCount = _TransMetric3(self.allDataCount, 2)
          for (var j = 0; j < self.allDataCount.length; j++) {
            self.allDataCount[j] = self.allDataCount[j].map(Number)
          }
          self.allDataCount.pop()
          self.arr = []
          self.srr = []
          self.allDataCount.forEach((element, index) => {
            self.arr[index] = element[0]
            self.srr[index] = element[1]
          })
          f.get('geometry')
            .getCoordinates()[0]
            .forEach(function(e, i) {
              if (self.count == i) {
                return
              }
              var measureTooltipElement = document.createElement('div')
              measureTooltipElement.className = 'ol-circle'
              var measureTooltip = new Overlay({
                id: i,
                element: measureTooltipElement,
                offset: [0, -3],
                positioning: 'bottom-center'
              })
              _iMap.addOverlay(measureTooltip)
              measureTooltipElement.innerHTML = i
              measureTooltip.setPosition(e)
            })
        })
        self.oparts = i18n.t('operating.delete')
      } else if (
        self.drawFormValue == 'Box' ||
        self.drawFormValue == 'Square' ||
        self.drawFormValue == 'Polygon'
      ) {
        self.mark = 'other'
        _iMap.addInteraction(self.draw)
        self.draw.on('drawstart', function(sketch) {
          if (self.fenceId == 'temporary') {
            self
              .$confirm(
                i18n.t('operating.drawRect'),
                i18n.t('operating.prompt'),
                {
                  confirmButtonText: i18n.t('common.cok'),
                  cancelButtonText: i18n.t('operating.cancel'),
                  type: 'warning'
                }
              )
              .then(() => {
                FenceSource2.removeFeature(
                  FenceSource2.getFeatureById(self.fenceId)
                )
                for (var k = 0; k < self.count; k++) {
                  _iMap.removeOverlay(_iMap.getOverlayById(k))
                }
              })
              .catch(() => {
                self.draw.abortDrawing()
              })
          }
          sketch.feature.getGeometry().on('change', function(evt) {
            var tooltipCoord = evt.target.getInteriorPoint().getCoordinates()
            self.measureTooltip2.setPosition(tooltipCoord)
            var geom = evt.target.extent_
            var height = ((geom[3] - geom[1]) / _dPR).toFixed(2)
            var width = ((geom[2] - geom[0]) / _dPR).toFixed(2)
            var output = 'width:' + width + 'm  height:' + height + 'm'
            self.measureTooltipElement2.innerHTML = output
          })
        })
        self.draw.on('drawend', function(evt) {
          self.drawingEnd(evt)
        })
        self.oparts = i18n.t('operating.cancel')
      } else if (self.drawFormValue == 'Circle') {
        self.arr = []
        self.mark = 'circle'
        _iMap.addInteraction(self.draw)
        self.draw.on('drawstart', function(sketch) {
          if (self.fenceId == 'temporary') {
            self
              .$confirm(
                i18n.t('operating.drawRect'),
                i18n.t('operating.prompt'),
                {
                  confirmButtonText: i18n.t('common.cok'),
                  cancelButtonText: i18n.t('operating.cancel'),
                  type: 'warning'
                }
              )
              .then(() => {
                FenceSource2.removeFeature(
                  FenceSource2.getFeatureById(self.fenceId)
                )
              })
              .catch(() => {
                self.draw.abortDrawing()
              })
          }
          sketch.feature.getGeometry().on('change', function(evt) {
            var centerLogLat = [
              (evt.target.extent_[0] + evt.target.extent_[2]) / 2,
              (evt.target.extent_[1] + evt.target.extent_[3]) / 2
            ]
            var radius = (evt.target.extent_[2] - evt.target.extent_[0]) / 2
            self.measureTooltip2.setPosition(centerLogLat)
            var output = 'radius:' + (radius / _dPR).toFixed(2) + 'm'
            self.measureTooltipElement2.innerHTML = output
          })
        })
        self.draw.on('drawend', function(evt) {
          self.drawCircleEnd(evt)
          self.measureTooltip2.setPosition(undefined)
        })
        self.oparts = i18n.t('operating.cancel')
      } else if (self.drawFormValue == 'BiaoChi') {
        _iMap.addInteraction(self.draw)
        self.draw.on('drawstart', function(sketch) {
          var measureTooltipElement = document.createElement('div')
          measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure'
          var measureTooltip = new Overlay({
            element: measureTooltipElement,
            offset: [0, -15],
            positioning: 'bottom-center'
          })
          _iMap.addOverlay(measureTooltip)
          sketch.feature.getGeometry().on('change', function(evt) {
            var geom = evt.target
            var output
            var tooltipCoord
            if (geom instanceof LineString) {
              output = self.formatLength(geom)
              tooltipCoord = geom.getLastCoordinate()
            }
            measureTooltipElement.innerHTML = output
            measureTooltip.setPosition(tooltipCoord)
          })
        })
      }
    },
    // 提交围栏类型转换
    drawingEnd(evt) {
      const self = this
      const geo = evt.feature.getGeometry()
      const type = geo.getType()
      let coors
      if (type == 'Polygon') {
        coors = geo.getCoordinates()
        self.coors = '[' + _TransMetric2(coors, 2).toString() + ']'
        self.fenceEditVisible = true
        self.isDisable = true
      }
      evt.feature.setId('temporary')
      self.fenceId = 'temporary'

      const coordinates = geo.getCoordinates()
      self.count = coordinates[0].length - 1
      self.allDataCount = coordinates
      self.allDataCount = _TransMetric3(self.allDataCount, 2)
      for (var j = 0; j < self.allDataCount.length; j++) {
        self.allDataCount[j] = self.allDataCount[j].map(Number)
      }
      self.allDataCount.pop()
      self.arr = []
      self.srr = []
      self.allDataCount.forEach((element, index) => {
        self.arr[index] = element[0]
        self.srr[index] = element[1]
      })
      geo.getCoordinates()[0].forEach(function(e, i) {
        if (self.count == i) {
          return
        }
        var measureTooltipElement = document.createElement('div')
        measureTooltipElement.className = 'ol-circle'
        var measureTooltip = new Overlay({
          id: i,
          element: measureTooltipElement,
          offset: [0, -3],
          positioning: 'bottom-center'
        })
        _iMap.addOverlay(measureTooltip)
        measureTooltipElement.innerHTML = i
        measureTooltip.setPosition(e)
      })
      self.modify = new Modify({
        source: FenceSource2
      })
      _iMap.addInteraction(self.modify)

      self.modify.on('modifyend', function(e) {
        const f = e.features.array_[0]
        for (var k = 0; k < self.count; k++) {
          _iMap.removeOverlay(_iMap.getOverlayById(k))
        }
        self.count = f.get('geometry').getCoordinates()[0].length - 1
        self.allDataCount = f.get('geometry').getCoordinates()
        self.allDataCount = _TransMetric3(self.allDataCount, 2)
        for (var j = 0; j < self.allDataCount.length; j++) {
          self.allDataCount[j] = self.allDataCount[j].map(Number)
        }
        self.allDataCount.pop()
        self.arr = []
        self.srr = []
        self.allDataCount.forEach((element, index) => {
          self.arr[index] = element[0]
          self.srr[index] = element[1]
        })
        f.get('geometry')
          .getCoordinates()[0]
          .forEach(function(e, i) {
            if (self.count == i) {
              return
            }
            var measureTooltipElement = document.createElement('div')
            measureTooltipElement.className = 'ol-circle'
            var measureTooltip = new Overlay({
              id: i,
              element: measureTooltipElement,
              offset: [0, -3],
              positioning: 'bottom-center'
            })
            _iMap.addOverlay(measureTooltip)
            measureTooltipElement.innerHTML = i
            measureTooltip.setPosition(e)
          })
      })
    },
    // 绘制圆形围栏结束
    drawCircleEnd(evt) {
      const self = this
      let centerLogLat, radius
      const circle = evt.feature.getGeometry()
      centerLogLat = circle.getCenter()
      radius = circle.getRadius()
      self.coors = '[' + _TransMetric2(centerLogLat, 2).toString() + ']'
      self.fenceId = 'temporary'
      evt.feature.setId('temporary')
      self.modify = new Modify({
        source: FenceSource2
      })
      _iMap.addInteraction(self.modify)
      self.modify.on('modifyend', function(e) {
        const f = e.features.array_[0].get('geometry')
        const coors = '[' + _TransMetric2(f.getCenter(), 2).toString() + ']'
        self.originX = eval(coors)[0]
        self.originY = eval(coors)[1]
        self.radius = eval((f.getRadius() / _dPR).toFixed(2))
      })
      self.fenceEditVisible = true
      self.isDisable = true
      self.originX = eval(self.coors)[0]
      self.originY = eval(self.coors)[1]
      self.radius = eval((radius / _dPR).toFixed(2))
      console.log(self.coors, (radius / _dPR).toFixed(2))
    },
    closeDialog() {
      const self = this
      self.measureTooltip2.setPosition(undefined)
      this.isDisable = false
      Load_Fence2()
      if (self.modify != null) {
        _iMap.removeInteraction(self.modify)
      }

      if (self.drawFormValue == 'Select') {
        const _selectedFeatures = self._Select.getFeatures()
        _selectedFeatures.clear()
        // Load_Fence(self.mapId)
        // self.fenceModify_init()
        self.clearMap(self.mapId)
      } else {
        self.clearMap(self.mapId)
        // Load_Fence(self.mapId)
        // self.fenceModify_init()
      }
      for (var k = 0; k < self.count; k++) {
        _iMap.removeOverlay(_iMap.getOverlayById(k))
      }
      self.fenceEditVisible = false
      self.isDisable = false
      self.fenceName = null
      self.fenceType = null
      self.coors = null
      self.fenceId = null
      self.disabled = false
      self.color1 = null
      self.color2 = null
    },

    clearMap(mapId) {
      const self = this
      if (mapId != undefined || mapId != '' || mapId != null) {
        Load_Fence(this.mapId)
        this.fenceModify_init()
      } else {
        this.msgError(this.$i18n.t('Notice.mapIDIsEmpty'))
      }
    },

    saveFenceEdit() {
      const self = this
      if (self.fenceType == null || self.fenceType.length == 0) {
        this.$message({
          message: i18n.t('realtime.fenceTypeMes'),
          type: 'error'
        })
        return
      }
      if (
        self.fenceId == null ||
        self.fenceId == '' ||
        self.fenceId == undefined
      ) {
        let param
        if (self.mark == 'circle') {
          param = {
            fenceName: self.fenceName,
            fenceType: self.fenceType.join(','),
            layerId: self.mapId,
            layerName: self.mapName,
            posGroupArray: eval(self.coors),
            mark: 'circle'
          }
        } else {
          param = {
            fenceName: self.fenceName,
            fenceType: self.fenceType.join(','),
            layerId: self.mapId,
            layerName: self.mapName,
            posGroupArray: eval(self.coors),
            mark: 'other'
          }
        }

        addFence(param).then((res) => {
          const RES = self.responseUse(res, true)
          if (RES) {
            self.fenceEditVisible = false
            self.isDisable = false
            self.fenceName = null
            self.fenceType = null
            self.coors = null
            // Load_Fence(self.mapId)
          }
        })
      } else if (self.fenceId == 'temporary') {
        var currentPoint = []
        self.arr.forEach((element, index) => {
          currentPoint.push([element, self.srr[index]])
        })
        currentPoint.push(currentPoint[0])
        self.coors = eval(currentPoint)
        let param
        if (self.mark == 'circle') {
          param = {
            fenceName: self.fenceName,
            fenceType: self.fenceType.join(','),
            layerId: self.mapId,
            layerName: self.mapName,
            radius: self.radius.toString(),
            origin: '[' + self.originX + ',' + self.originY + ']',
            mark: 'circle',
            fillColor: self.color1 == null ? 'null' : self.color1,
            frameColor: self.color2 == null ? 'null' : self.color2
          }
        } else {
          param = {
            fenceName: self.fenceName,
            fenceType: self.fenceType.join(','),
            layerId: self.mapId,
            layerName: self.mapName,
            posGroupArray: self.coors,
            mark: 'other',
            fillColor: self.color1 == null ? 'null' : self.color1,
            frameColor: self.color2 == null ? 'null' : self.color2
          }
        }
        addFence(param).then((res) => {
          const RES = self.responseUse(res, true)
          if (RES) {
            self.fenceEditVisible = false
            self.isDisable = false
            self.fenceName = null
            self.fenceType = null
            self.coors = null
            self.fenceId = null
          }
        })
      } else {
        var currentPoint = []
        self.arr.forEach((element, index) => {
          currentPoint.push([element, self.srr[index]])
        })
        currentPoint.push(currentPoint[0])
        self.coors = eval(currentPoint)
        let param
        if (self.mark == 'circle') {
          param = {
            fenceName: self.fenceName,
            fenceType: self.fenceType.join(','),
            layerId: self.mapId,
            layerName: self.mapName,
            idx: this.fenceId,
            radius: self.radius.toString(),
            origin: '[' + self.originX + ',' + self.originY + ']',
            mark: 'circle',
            fillColor: self.color1 == null ? 'null' : self.color1,
            frameColor: self.color2 == null ? 'null' : self.color2
          }
        } else {
          param = {
            fenceName: self.fenceName,
            fenceType: self.fenceType.join(','),
            layerId: self.mapId,
            layerName: self.mapName,
            posGroupArray: self.coors,
            idx: this.fenceId,
            mark: 'other',
            fillColor: self.color1 == null ? 'null' : self.color1,
            frameColor: self.color2 == null ? 'null' : self.color2
          }
        }
        addFence(param).then((res) => {
          const RES = self.responseUse(res, true)
          if (RES) {
            self.fenceEditVisible = false
            self.isDisable = false
            self.fenceName = null
            self.fenceType = null
            self.coors = null
            self.fenceId = null
            self.radius = null
          }
        })
      }
    },
    deleteForm() {
      if (this.oparts == i18n.t('operating.cancel')) {
        this.fenceEditVisible = false
        this.isDisable = false
      } else if (this.oparts == i18n.t('operating.delete')) {
        this.delFenceVisible = true
        this.isDisable = true
      }
    },
    deleteFence() {
      const param = {
        idx: this.fenceId
      }
      deleteFence([param]).then((res) => {
        const RES = this.responseUse(res, true)
        if (RES) {
          const currentFeature = FenceSource.getFeatureById(this.fenceId)
          FenceSource.removeFeature(currentFeature)
          this.delFenceVisible = false
          this.fenceEditVisible = false
        }
      })
    },
    pointerMoveHandler(evt) {
      if (evt.dragging) {
        return
      }
    },
    createMeasureTooltip2() {
      if (this.measureTooltipElement2) {
        this.measureTooltipElement2.parentNode.removeChild(
          this.measureTooltipElement2
        )
      }
      this.measureTooltipElement2 = document.createElement('div')
      this.measureTooltipElement2.className = 'ol-tooltip ol-tooltip-measure'
      this.measureTooltip2 = new Overlay({
        element: this.measureTooltipElement2,
        offset: [0, -15],
        positioning: 'bottom-center'
      })
      _iMap.addOverlay(this.measureTooltip2)
    },
    formatLength: function(line) {
      var length = (getLength(line) / _dPR).toFixed(2)
      var output
      if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km'
      } else {
        output = Math.round(length * 100) / 100 + ' ' + 'm'
      }
      return output
    },
    changeArr() {
      var collectPoint = []
      var cachePoint = []
      var pixelPosition
      this.arr.forEach((element, index) => {
        collectPoint.push([element, this.srr[index]])
      })
      cachePoint.push(collectPoint)
      cachePoint[0].push(collectPoint[0])

      pixelPosition = _TransPixel(cachePoint)
      let currentFeature
      if (this.fenceId == 'temporary') {
        currentFeature = FenceSource2.getFeatureById(this.fenceId)
      } else {
        currentFeature = FenceSource.getFeatureById(this.fenceId)
      }
      currentFeature.getGeometry().setCoordinates(pixelPosition)
      pixelPosition[0].pop()
      pixelPosition[0].forEach((element, index) => {
        var currentOverLayer = _iMap.getOverlayById(index)
        currentOverLayer.setPosition(element)
      })
    },
    changeArr2() {
      let currentFeature
      if (this.fenceId == 'temporary') {
        currentFeature = FenceSource2.getFeatureById(this.fenceId)
      } else {
        currentFeature = FenceSource.getFeatureById(this.fenceId)
      }
      currentFeature
        .getGeometry()
        .setCenter(_TransPixel([this.originX, this.originY]))
      currentFeature.getGeometry().setRadius(this.radius * _dPR)
    },
    changeColor() {
      const self = this
      let currentFeature
      let name
      if (self.fenceId == 'temporary') {
        currentFeature = FenceSource2.getFeatureById(self.fenceId)
        if (self.color1 == null) self.color1 = 'rgba(165,42,42,0.1)'
        if (self.color2 == null) self.color2 = 'rgba(165,42,42)'
        name = ''
      } else {
        currentFeature = FenceSource.getFeatureById(self.fenceId)
        if (self.color1 == null) self.color1 = 'rgba(165,42,42,0.1)'
        if (self.color2 == null) self.color2 = 'rgba(165,42,42)'
        name = currentFeature.get('name')
      }
      currentFeature.setStyle(
        new Style({
          fill: new Fill({
            color: self.color1
          }),
          stroke: new Stroke({
            lineDash: [1, 2, 3, 4, 5, 6],
            color: self.color2,
            width: 2
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: '#FF0000'
            })
          }),
          text: new Text({
            text: name,
            font: 'bold 14px Arial',
            textAlign: 'center',
            textBaseline: 'middle',
            offsetX: 0,
            offsetY: 0,
            fill: new Fill({
              color: '#FF0000'
            }),
            stroke: new Stroke({
              color: '#fff',
              width: 3
            })
          })
        })
      )
    }
  }
}
</script>

<style scoped>
::v-deep .el-drawer__wrapper {
  width: 400px;
  left: unset;
}

.head {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
}
.head span {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #606266;
  padding: 0 12px 0 0;
  font-weight: 700;
}
#map {
  width: 100%;
  height: calc(100% - 50px);
  background: rgb(238, 238, 238);
}

>>> .ol-tooltip {
  position: relative;
  background: rgba(255, 238, 2, 1);
  border-radius: 4px;
  color: black;
  padding: 4px 8px;
  opacity: 1;
  white-space: nowrap;
  font-size: 12px;
}

.ol-tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
}
>>> .ol-tooltip-measure {
  opacity: 1;
  font-weight: bold;
}
>>> .ol-tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}
>>> .ol-tooltip-measure:before,
>>> .ol-tooltip-static:before {
  border-top: 6px solid rgba(229, 255, 0, 0.8);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}
>>> .ol-tooltip-static:before {
  border-top-color: #ffcc33;
}

>>> .ol-circle {
  color: white;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  background: rgb(0, 102, 255, 0.7);
  text-align: center;
  line-height: 26px;
}

>>> .el-drawer.rtl {
  overflow: scroll;
}

/deep/ .treeps .vue-treeselect__single-value {
  color: #c6c6c6;
}
/deep/ .vue-treeselect.treeps {
  cursor: not-allowed;
}
</style>
